<div class="col-xl-12">
    <div class="widget widget-07 has-shadow">
        <div class="widget-header bordered d-flex align-items-center">
            <h2>任务告警</h2>
            <div class="widget-options">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary ripple">Week</button>
                    <button type="button" class="btn btn-primary ripple">Month</button>
                </div>
            </div>
        </div>
        <div class="widget-body">
            <div class="table-responsive table-scroll padding-right-10" style="max-height:520px;">
                <table class="table table-hover mb-0">
                    <thead>
                    <tr>
                        <th>
                            <div class="styled-checkbox mt-2">
                                <input type="checkbox" name="check-all" id="check-all">
                                <label for="check-all"></label>
                            </div>
                        </th>
                        <th>任务 ID</th>
                        <th>Customer Name</th>
                        <th>Country</th>
                        <th>Ship Date</th>
                        <th><span style="width:100px;">Status</span></th>
                        <th>Order Total</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td style="width:5%;">
                            <div class="styled-checkbox mt-2">
                                <input type="checkbox" name="cb1" id="cb1">
                                <label for="cb1"></label>
                            </div>
                        </td>
                        <td><span class="text-primary">054-01-FR</span></td>
                        <td>Lori Baker</td>
                        <td>US</td>
                        <td>10/21/2017</td>
                        <td><span style="width:100px;"><span
                                class="badge-text badge-text-small info">Paid</span></span></td>
                        <td>$139.45</td>
                        <td class="td-actions">
                            <a href="javascript:void(0)"><i class="la la-edit edit"></i></a>
                            <a href="javascript:void(0)"><i class="la la-close delete"></i></a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="widget-footer d-flex align-items-center">
            <div class="mr-auto p-2">
                <span class="display-items">Showing 1-30 / 150 Results</span>
            </div>
            <div class="p-2">
                <nav aria-label="...">
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <span class="page-link"><i class="ion-chevron-left"></i></span>
                        </li>
                        <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
                        <li class="page-item active">
                            <span class="page-link">2<span class="sr-only">(current)</span></span>
                        </li>
                        <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="javascript:void(0)"><i class="ion-chevron-right"></i></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>